<template>
  <div class="flex flex-col h-screen">
    <div
      class="flex flex-nowrap fixed w-full items-baseline top-0 px-6 py-4 bg-gray-100"
    >
      <div class="text-2xl font-bold">ChatGPT</div>
      <div class="ml-4 text-sm text-gray-500">
        基于OpenAI的ChatGPT自然语言模型人工智能对话
      </div>
      <div
        class="ml-auto px-3 py-2 text-sm cursor-pointer hover:bg-white rounded-md"
        @click="clickConfig()"
      >
        设置
      </div>
    </div>
    <div class="flex-1">
      <div class="flex flex-col mt-24 px-6 pb-8">
        <div
          :class="`flex flex-col justify-center ${
            item.role == 'user' ? 'items-end' : 'items-start'
          }`"
          v-for="(item, index) in messageList.slice(2)"
          :key="index"
        >
          <p>{{ item.role }}</p>
          <p class="color-gray-500 text-sm">{{ item.content }}</p>
        </div>
      </div>
    </div>
    <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
      <div class="mb-2 text-sm text-gray-500">请输入API KEY:</div>
      <div class="flex">
        <input
          v-model="messageContent"
          class="input flex-1"
          :type="isConfig ? 'password' : 'text'"
          :placeholder="isConfig ? 'sk-xxxxxx' : '给ChatGPT发送消息'"
          @keydown.enter="sendOrSave()"
        />
        <button class="btn ml-4" :disabled="isTalking" @click="sendOrSave()">
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { chat } from '../libs/gpt';

onMounted(() => {
  if (getAPIKey()) {
    isConfig.value = false;
  }
});

const saveAPIKey = apiKey => {
  localStorage.setItem('apiKey', apiKey);
  return true;
};

const getAPIKey = () => {
  return localStorage.getItem('apiKey');
};

const isConfig = ref(true); // true api-key 设置 false 聊天
const messageContent = ref('');
const isTalking = ref(false); // LLM 正在返回

const clickConfig = () => {};
const sendOrSave = () => {
  if (!messageContent.value.length) return;
  if (isConfig.value) {
    // save api-key
    if (saveAPIKey(messageContent.value.trim())) {
      isConfig.value = false;
    }

    messageContent.value = '';
  } else {
    // send message to ChatGPT
    sendMessage();
  }
};

const messageList = ref([
  {
    role: 'admin',
    content: '你是人工智能客服，请尽可能简洁地回答问题',
  },
  {
    role: 'assistant',
    content: `你好，我是AI语言模型，我可以提供一些常用服务和信息，例如：

    1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。

    2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。

    3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。

    请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。
    `,
  },
]);

const sendMessage = async () => {
  const message = messageContent.value.trim();
  try {
    isTalking.value = true;
    messageList.value.push({ role: 'user', content: message });
    const data = await chat(messageList.value, getAPIKey());
    messageList.value.push({ role: 'assistant', content: data });
    messageContent.value = '';
  } catch (error) {
  } finally {
    isTalking.value = false;
  }
};
</script>

<style></style>
